<template>
  <view>
    <view
      class="tui-navigation-bar"
      :class="{
        'tui-bar-line': opacity >= maxOpacity && splitLine,
        'tui-navbar-fixed': isFixed,
        'tui-backdrop__filter': backdropFilter && dropDownOpacity > 0
      }"
      :style="{
        height: height + 'px',
        backgroundColor: `rgba(${background},${opacity})`,
        opacity: dropDownOpacity,
        zIndex: isFixed ? zIndex : 'auto'
      }"
    >
      <!-- 状态栏 -->
      <view v-if="isImmersive" class="tui-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

      <!-- 标题栏 -->
      <view
        v-if="title && !isCustom"
        class="tui-navigation_bar-title"
        :style="{
          opacity: transparent || opacity >= maxOpacity ? 1 : opacity,
          color: color,
          paddingTop: top - statusBarHeight + 'px'
        }"
      >
        {{ title }}
      </view>

      <!-- 左侧操作 （ 箭头 / 回首页 ） -->
      <slot>
        <view v-if="!inTabBar && showHome && showBack" class="tui-header-icon-group" :style="{ marginTop: top + 'px' }">
          <my-icon name="arrow-left" color="#fff" size="18" @click="back()" hoverClass class="pl-1 pr-1"></my-icon>
          <my-icon name="vertical-line" color="#454851" size="18" hoverClass></my-icon>
          <my-icon name="home" color="#fff" size="18" @click="$open('/home/home', 'st')" hoverClass class="pl-1 pr-1"></my-icon>
        </view>
        <view v-else-if="!inTabBar && showHome" class="tui-header-icon" :style="{ marginTop: top + 'px' }">
          <my-icon name="home" color="#fff" size="18" @click="$open('/home/home', 'st')" hoverClass class="pl-1 pr-1"></my-icon>
        </view>
        <view v-else-if="!inTabBar && showBack" class="tui-header-icon" :style="{ marginTop: top + 'px' }">
          <my-icon name="arrow-left" color="#fff" size="18" @click="back()" hoverClass class="pl-1 pr-1"></my-icon>
        </view>
      </slot>
    </view>

    <!-- 占位高度 -->
    <view v-if="placeholderHeight && isFixed" :style="{ height: height + 'px' }"></view>
  </view>
</template>

<script>
export default {
  name: 'tuiNavigationBar',
  props: {
    // NavigationBar标题
    title: {
      type: String,
      default: ''
    },
    // NavigationBar标题颜色
    color: {
      type: String,
      default: '#ffffff'
    },
    // NavigationBar背景颜色,不支持rgb
    backgroundColor: {
      type: String,
      default: '#131828'
    },
    // 是否需要分割线
    splitLine: {
      type: Boolean,
      default: false
    },
    // 是否设置不透明度
    isOpacity: {
      type: Boolean,
      default: false
    },
    // 不透明度最大值 0-1
    maxOpacity: {
      type: [Number, String],
      default: 1
    },
    // 背景透明 【设置该属性，则背景透明，只出现内容，isOpacity和maxOpacity失效】
    transparent: {
      type: Boolean,
      default: false
    },
    // 滚动条滚动距离
    scrollTop: {
      type: [Number, String],
      default: 0
    },
    /*
			 isOpacity 为true时生效
			 opacity=scrollTop /windowWidth * scrollRatio
			*/
    scrollRatio: {
      type: [Number, String],
      default: 0.3
    },
    // 是否自定义header内容
    isCustom: {
      type: Boolean,
      default: false
    },
    // 是否沉浸式
    isImmersive: {
      type: Boolean,
      default: true
    },
    isFixed: {
      type: Boolean,
      default: true
    },
    // 是否开启高斯模糊效果[仅在支持的浏览器有效果]
    backdropFilter: {
      type: Boolean,
      default: false
    },
    // 下拉隐藏NavigationBar，主要针对有回弹效果ios端
    dropDownHide: {
      type: Boolean,
      default: false
    },
    // z-index设置
    zIndex: {
      type: [Number, String],
      default: 999
    },
    // 是否展示左侧操作区域跳转到首页按钮
    showHome: {
      type: Boolean,
      default: true
    },
    showBack: {
      type: Boolean,
      default: true
    },
    // 是否处于 tabbar 页 ， 如果是的话隐藏左侧操作按钮
    inTabBar: {
      type: Boolean,
      default: false
    },
    // 是否需要占位高度
    placeholderHeight: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    scrollTop(newValue, oldValue) {
      if (this.isOpacity && !this.transparent) {
        this.opacityChange()
      }
    },
    backgroundColor(val) {
      if (val) {
        this.background = this.hexToRgb(val)
      }
    }
  },
  data() {
    return {
      width: 375, // header宽度
      left: 375, // 小程序端 左侧距胶囊按钮距离
      height: 44, // header高度
      top: 0,
      scrollH: 1, // 滚动总高度,计算opacity
      opacity: 1, // 0-1
      statusBarHeight: 0, // 状态栏高度
      background: '19,24,40', // header背景色
      dropDownOpacity: 1
    }
  },
  created() {
    this.dropDownOpacity = this.backdropFilter && 0
    this.opacity = this.isOpacity || this.transparent ? 0 : this.maxOpacity
    this.background = this.hexToRgb(this.backgroundColor)
    let obj = {}
    // #ifdef MP-WEIXIN
    obj = wx.getMenuButtonBoundingClientRect()
    // #endif
    // #ifdef MP-BAIDU
    obj = swan.getMenuButtonBoundingClientRect()
    // #endif
    // #ifdef MP-ALIPAY
    my.hideAddToDesktopMenu()
    // #endif
    uni.getSystemInfo({
      success: res => {
        this.statusBarHeight = res.statusBarHeight
        this.width = res.windowWidth
        this.left = obj.left || res.windowWidth
        if (this.isImmersive) {
          this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44
        }
        this.scrollH = res.windowWidth * this.scrollRatio
        this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6

        this.$store.dispatch('NavBar/setNavBarHeight', this.height)
        this.$emit('init', {
          width: this.width,
          height: this.height,
          left: this.left,
          top: this.top,
          statusBarHeight: this.statusBarHeight,
          opacity: this.opacity,
          windowHeight: res.windowHeight
        })
      }
    })
  },
  methods: {
    back() {
      uni.navigateBack()
    },
    hexToRgb(hex) {
      let rgb = '255,255,255'
      if (hex && ~hex.indexOf('#')) {
        if (hex.length === 4) {
          let text = hex.substring(1, 4)
          hex = '#' + text + text
        }
        let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
        if (result) {
          rgb = `${parseInt(result[1], 16)},${parseInt(result[2], 16)},${parseInt(result[3], 16)}`
        }
      }
      return rgb
    },
    opacityChange() {
      if (this.dropDownHide) {
        if (this.scrollTop < 0) {
          if (this.dropDownOpacity > 0) {
            this.dropDownOpacity = 1 - Math.abs(this.scrollTop) / 30
          }
        } else {
          this.dropDownOpacity = 1
        }
      }

      let scroll = this.scrollTop <= 1 ? 0 : this.scrollTop
      let opacity = scroll / this.scrollH
      if ((this.opacity >= this.maxOpacity && opacity >= this.maxOpacity) || (this.opacity == 0 && opacity == 0)) {
        return
      }
      this.opacity = opacity > this.maxOpacity ? this.maxOpacity : opacity
      if (this.backdropFilter) {
        this.dropDownOpacity = this.opacity >= this.maxOpacity ? 1 : this.opacity
      }
      this.$emit('change', {
        opacity: this.opacity
      })
    }
  }
}
</script>

<style scoped>
.tui-navigation-bar {
  width: 100%;
  transition: opacity 0.4s;
}

.tui-backdrop__filter {
  /* Safari for macOS & iOS */
  -webkit-backdrop-filter: blur(15px);
  /* Google Chrome */
  backdrop-filter: blur(15px);
}

.tui-navbar-fixed {
  position: fixed;
  left: 0;
  top: 0;
}

.tui-header-icon,
.tui-header-icon-group {
  position: fixed;
  top: 0;
  left: 10px;
  height: 32px;
  transform: translateZ(0);
  z-index: 9998;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.tui-header-icon-group {
  border: 1rpx solid #717279;
  border-radius: 50px;
  background: #111521;
  justify-content: space-between;
  padding: 0 10px;
}

.tui-status-bar {
  width: 100%;
}

.tui-navigation_bar-title {
  width: 100%;
  font-size: 17px;
  line-height: 17px;

  /* #ifndef APP-PLUS */
  font-weight: 500;
  /* #endif */

  height: 32px;

  /* #ifdef H5 */
  /* 
    修改
    author: zhuolin
    time: 2021-04-09
    reason: 兼容 h5 的导航栏字体不居中问题
  */
  height: 100%;
  padding-top: 0 !important;
  /* #endif */

  display: flex;
  align-items: center;
  justify-content: center;
}

.tui-bar-line::after {
  content: '';
  position: absolute;
  border-bottom: 1rpx solid #eaeef1;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  bottom: 0;
  right: 0;
  left: 0;
}
</style>
